{% extends "admin/base.html" %}


{% block style %}
<style>
/* 表格头部背景色 */
th {
    background-color: #359f6a; /* MediumSeaGreen */
    color: #fff;
    font-weight: bold
}
</style>
{% endblock %}


{% block content_main %}
    <blockquote class="layui-elem-quote">单选题</blockquote>
    <table id="demo" lay-filter="test"></table>
    <blockquote class="layui-elem-quote">多选题</blockquote>
    <table id="demo1" lay-filter="test1"></table>
    <blockquote class="layui-elem-quote">判断题</blockquote>
    <table id="demo2" lay-filter="test2"></table>
    <blockquote class="layui-elem-quote">简答题</blockquote>
    <table id="demo3" lay-filter="test3"></table>
    <blockquote class="layui-elem-quote">图片题</blockquote>
    <table id="demo4" lay-filter="test4"></table>
{% endblock %}


{% block script %}
{#工具栏模板：#}
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
  </div>
</script>
<script>
    {#window.location.href.split("?")[1].split("=")[1]#}
    var id_question_bank = window.location.href.split("?")[1].split("=")[1];
    console.log(id_question_bank);
    layui.use(function() {
        var table = layui.table; //表格
        var dropdown = layui.dropdown; //下拉菜单
        var layer = layui.layer;

        // 执行一个 table 实例
        table.render({
            elem: '#demo'
            , url: '/question_bank/query_single_choice_question_bank?id_question_bank='+id_question_bank //数据接口（此处为静态数据，仅作演示）
            , page: true //开启分页
            , toolbar: "#toolbarDemo"  //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'question', title: '问题', width: 200}
                , {field: 'a', title: 'A', width: 200}
                , {field: 'b', title: 'B', width: 200}
                , {field: 'c', title: 'C', width: 200}
                , {field: 'd', title: 'D', width: 200}
                , {field: 'answer', title: '答案', width: 200}
                , {field: 'create_time', title: '创建时间', width: 200}
                {#, {fixed: 'right', title: '操作', width: 200, align:'center', toolbar: '#barDemo'}#}
            ]]
        });
        table.render({
            elem: '#demo1'
            , url: '/question_bank/query_multiple_choice_question_bank?id_question_bank='+id_question_bank //数据接口（此处为静态数据，仅作演示）
            , page: true //开启分页
            , toolbar: "#toolbarDemo"  //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'question', title: '问题', width: 200}
                , {field: 'a', title: 'A', width: 200}
                , {field: 'b', title: 'B', width: 200}
                , {field: 'c', title: 'C', width: 200}
                , {field: 'd', title: 'D', width: 200}
                , {field: 'answer', title: '答案', width: 200}
                , {field: 'create_time', title: '创建时间', width: 200}
                {#, {fixed: 'right', title: '操作', width: 200, align:'center', toolbar: '#barDemo'}#}
            ]]
        });
        table.render({
            elem: '#demo2'
            , url: '/question_bank/query_judgmental_question_bank?id_question_bank='+id_question_bank //数据接口（此处为静态数据，仅作演示）
            , page: true //开启分页
            , toolbar: "#toolbarDemo"  //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'question', title: '问题', width: 200}
                , {field: 'answer', title: '答案', width: 200}
                , {field: 'create_time', title: '创建时间', width: 200}
                {#, {fixed: 'right', title: '操作', width: 200, align:'center', toolbar: '#barDemo'}#}
            ]]
        });
        table.render({
            elem: '#demo3'
            , url: '/question_bank/query_short_answer_question_bank?id_question_bank='+id_question_bank //数据接口（此处为静态数据，仅作演示）
            , page: true //开启分页
            , toolbar: "#toolbarDemo"  //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'question', title: '题目', width: 200}
                , {field: 'answer', title: '答案', width: 200}
                , {field: 'create_time', title: '创建时间', width: 200}
                {#, {fixed: 'right', title: '操作', width: 200, align:'center', toolbar: '#barDemo'}#}
            ]]
        });
        table.render({
            elem: '#demo4'
            , url: '/question_bank/query_picture_question_bank?id_question_bank='+id_question_bank //数据接口（此处为静态数据，仅作演示）
            , page: true //开启分页
            , toolbar: "#toolbarDemo"  //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field:'question', title: '题目', width: 200
                  ,templet: function(d){
                    console.log(d.LAY_INDEX); //得到序号 一般不常用
                    console.log(d.LAY_COL); //得到当前列表头配置信息（layui 2.6.8 新增） 一般不常用

                    //得到当前行数据，并拼接成自定义模板
                    return "<a href='"+d.question+"'><img src='"+d.question+"'></a>"
                  }
                }
                , {field: 'answer', title: '答案', width: 200}
                , {field: 'create_time', title: '创建时间', width: 200}
                {#, {fixed: 'right', title: '操作', width: 200, align:'center', toolbar: '#barDemo'}#}
            ]]
        });

        // 头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
            ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
              case 'delete':
                if(data.length === 0){
                  layer.msg('请选择一行');
                } else {
                  console.log(checkStatus.data);
                  $.post(
                      "/question_bank/delete_single_choice_question_bank",
                      {
                          "id_single_choice_question_bank": JSON.stringify(checkStatus.data)
                      },
                      function (data,status) {
                        console.log(data);
                        window.location.reload();
                      }
                  );
                  {#layer.alert('添加 [id]：'+ checkStatus.data[0].id);#}
                }
              break;
              case 'update':
                if(data.length === 0){
                  layer.msg('请选择一行');
                } else if(data.length > 1){
                  layer.msg('只能同时编辑一个');
                } else {
                  layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                }
              break;
            };
        });
        table.on('toolbar(test1)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
            ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
              case 'delete':
                if(data.length === 0){
                  layer.msg('请选择一行');
                } else {
                  console.log(checkStatus.data);
                  $.post(
                      "/question_bank/delete_multiple_choice_question_bank",
                      {
                          "id_multiple_choice_question_bank": JSON.stringify(checkStatus.data)
                      },
                      function (data,status) {
                        console.log(data);
                        window.location.reload();
                      }
                  );
                  {#layer.alert('添加 [id]：'+ checkStatus.data[0].id);#}
                }
              break;
              case 'update':
                if(data.length === 0){
                  layer.msg('请选择一行');
                } else if(data.length > 1){
                  layer.msg('只能同时编辑一个');
                } else {
                  layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                }
              break;
            };
        });
        table.on('toolbar(test2)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
            ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
              case 'delete':
                if(data.length === 0){
                  layer.msg('请选择一行');
                } else {
                  console.log(checkStatus.data);
                  $.post(
                      "/question_bank/delete_judgmental_question_bank",
                      {
                          "id_judgmental_question_bank": JSON.stringify(checkStatus.data)
                      },
                      function (data,status) {
                        console.log(data);
                        window.location.reload();
                      }
                  );
                  {#layer.alert('添加 [id]：'+ checkStatus.data[0].id);#}
                }
              break;
              case 'update':
                if(data.length === 0){
                  layer.msg('请选择一行');
                } else if(data.length > 1){
                  layer.msg('只能同时编辑一个');
                } else {
                  layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                }
              break;
            };
        });
        table.on('toolbar(test3)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
            ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
              case 'delete':
                if(data.length === 0){
                  layer.msg('请选择一行');
                } else {
                  console.log(checkStatus.data);
                  $.post(
                      "/question_bank/delete_short_answer_question_bank",
                      {
                          "id_short_answer_question_bank": JSON.stringify(checkStatus.data)
                      },
                      function (data,status) {
                        console.log(data);
                        window.location.reload();
                      }
                  );
                  {#layer.alert('添加 [id]：'+ checkStatus.data[0].id);#}
                }
              break;
              case 'update':
                if(data.length === 0){
                  layer.msg('请选择一行');
                } else if(data.length > 1){
                  layer.msg('只能同时编辑一个');
                } else {
                  layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                }
              break;
            };
        });
        table.on('toolbar(test4)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
            ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
              case 'delete':
                if(data.length === 0){
                  layer.msg('请选择一行');
                } else {
                  console.log(checkStatus.data);
                  $.post(
                      "/question_bank/delete_picture_question_bank",
                      {
                          "id_picture_question_bank": JSON.stringify(checkStatus.data)
                      },
                      function (data,status) {
                        console.log(data);
                        window.location.reload();
                      }
                  );
                  {#layer.alert('添加 [id]：'+ checkStatus.data[0].id);#}
                }
              break;
              case 'update':
                if(data.length === 0){
                  layer.msg('请选择一行');
                } else if(data.length > 1){
                  layer.msg('只能同时编辑一个');
                } else {
                  layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                }
              break;
            };
        });
    });
    </script>
{% endblock %}
